<script>
 
export default {
  data () {
    return {
      // 类型列表
      sortList: [],

      // 侧边导航栏列表
      sideList: [],

      // 当前激活的菜单
      menuActive: '',
    }
  },
  watch: {
    '$route.path' (val) {
      this.init(val);
    }
  },
  mounted () {
    this.init(this.$route.path);
  },
  methods: {
    init (path) {
      if (path == '/empty') {
        return;
      }
      this.menuActive = path;
      this.setMenuList(path); // 设置菜单列表
    },

    // 设置菜单列表
    setMenuList (path) {
      var rootMenu = this.$tools.menu.root(path, 1);
      var sort = [], side = [];
      if (rootMenu.sort == 'true') {
        sort = rootMenu.children;
        side = this.$tools.menu.root(path, 2).children;
      } else {
        side = rootMenu.children;
      }

      if (JSON.stringify(sort) != JSON.stringify(this.sortList)) {
        this.sortList = sort;
      }
      if (JSON.stringify(side) != JSON.stringify(this.sideList)) {
        this.sideList = [];
        if (side && side.length) {
          this.$nextTick(() => {
            this.sideList = side;
          })
        }
      }
    },

    // 判断分类是否选中
    isSortActive (item) {
      return item.idxs.join('_') == this.$tools.menu.root(this.$route.path, 2).idxs.join('_') ? true : false;
    }
  },

  render (c) {
    var _this = this;
    var sortList = this.sortList;
    var sideList = this.sideList;
    var menuActive = this.menuActive;

    var children = [];

    // 分类子列表
    if (sortList.length) {
      var aLi = sortList.map(item => {
        return c('li', {
          class: {
            'active': _this.isSortActive(item)
          }
        }, [
          c('router-link', {
            class: {
              'sort-btn': true
            },
            attrs: {
              to: item.redirect || item.path
            }
          }, [
            c('i', {
              class: ['i1', item.icon]
            }),
            c('div', {
              class: ['name']
            }, [
              c('span', {
                domProps: {
                  innerHTML: item.name
                }
              }),
              c('i', {
                class: ['i2', 'el-icon-caret-bottom']
              })
            ])
          ])
        ])
      })
      var oUl = c('ul', {
        class: {
          'sort-list': true
        }
      }, aLi);
      children.push(oUl);
    }

    // 递归菜单
    if (sideList.length) {
      var oMenu = c('el-menu', {
        class: ['this-menu'],
        attrs: {
          'default-active': menuActive,
          'router': true
        }
      }, getMenuChildren(sideList));

      children.push(c('div', {}, [oMenu]));
    }

    return c('div', {
      class: {
        'com-aside-wp': true
      }
    }, children);


    // 获取递归菜单
    function getMenuChildren (list) {
      var res = [];
      for (var i = 0; i < list.length; i++) {
        var item = list[i];

        if (item.children && item.children.length) {
          var children = [
              c('div', {
                class: ['text', 'ul-t'],
                slot: 'title',
                domProps: {
                  innerHTML: '<span>' + item.name + '</span>'
                }
              })
            ].concat(getMenuChildren(item.children))
          res.push(
            c('el-submenu', {
              attrs: {
                index: item.idxs.join('_')
              }
            }, children)
          );

        } else {
          res.push(c('el-menu-item', {
            class: ['lv-one'],
            attrs: {
              index: item.path
            }
          }, [c('div', {
              class: ['text', 'li-t'],
              domProps: {
                innerHTML: '<span>' + item.name + '</span>'
              }
            })]
          ))
        }
      }
      return res;
    }
  }
}


</script>
<style lang="scss" scoped>
.com-aside-wp {
  width: 250px;
  min-height: 100%;
  border-right: 1px solid #d6d5d1;
  box-sizing: border-box;

  .sort-list {
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    li {
      display: inline-block;
      position: relative;
      padding-bottom: 12px;
      width: 33%;
      min-width: 60px;
      
      &.active {
        .sort-btn {
          .name {
            &:before {
              display: block;
            }
            .i2 {
              display: block;
            }
          }
        }
      }

      &:nth-child(1) {
        .sort-btn {
          color: #BC8D15;
          .name {
            &:before {
              background: #BC8D15;
            }
          }
        }
      }
      &:nth-child(2) {
        .sort-btn {
          color: #6C955A;
          .name {
            &:before {
              background: #6C955A;
            }
          }
        }
      }
      &:nth-child(3) {
        .sort-btn {
          color: #5CAAC3;
          .name {
            &:before {
              background: #5CAAC3;
            }
          }
        }
      }
      &:nth-child(4) {
        .sort-btn {
          color: #9FC56A;
          .name {
            &:before {
              background: #9FC56A;
            }
          }
        }
      }
    }

    .sort-btn {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      padding-top: 15px;
      height: 80px;
      box-sizing: border-box;
      cursor: pointer;
    }
    .i1 {
      text-align: center;
      font-size: 25px;
    }
    .name {
      display: inline-block;
      position: relative;
      &:before {
        content: '';
        display: none;
        position: absolute;
        left: 0;
        right: 0;
        bottom: -3px;
        height: 2px;
      }
      .i2 {
        display: none;
        position: absolute;
        bottom: -16px;
        left: 50%;
        margin-left: -7px;
        font-size: 14px;
      }
    }
  }

  .this-menu {
    border-right: none;

    /*选中*/
    /deep/ {
      .el-menu-item {
        padding-right: 10px;
        &.is-active {
          color: #fff;
          &:before {
            display: block;
          }
          &.lv-one {
            color: #BC8D15;
            &:before {
              display: none;
            }
          }
        }
        
        &:before {
          display: none;
          content: '';
          position: absolute;
          z-index: 1;
          left: 20px;
          right: 0;
          top: 0;
          bottom: 0;
          background: #BC8D15;
          border-top-left-radius: 35px;
        }
        .text {
          position: relative;
          z-index: 2;
        }
      }
    }
    
    .ul-t, .li-t {
      display: flex;
      align-items: center;
      width: 100%;
      height: 100%;
      line-height: 20px;
      white-space: break-spaces;
    }
    .ul-t {
      width: 90%;
    }
  }

}
</style>